<template>
	<view class="">
		<!-- 基本信息 -->
		<u-cell-group>
			<u-cell-item :arrow="false">
				<view slot="title">
					<view><text>头像</text></view>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="u-flex" style="justify-content: flex-end">
					<common-upload max-count="1" @on-success="uploadSuccess"></common-upload>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="u-flex" style="justify-content: flex-end">
					<view class="u-p-t-30">
						<button class="u-reset-button"
							style="margin: 10rpx;background: #f4f5f6;position: relative;border-radius: 10rpx;"
							open-type="chooseAvatar" @chooseavatar="getUserProfile">
							<!-- <image v-if="form.photo != ''" :src="form.photo" mode="widthFix" style="width: 150rpx;height: 150rpx;border-radius: 10rpx;"></image> -->
							<u-avatar v-if="form.photo != ''" :src="photo" size="100" mode="square"
								class="u-flex"></u-avatar>

							<view v-else class="u-add-wrap__hover"
								style="width: 150rpx;height: 150rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;">
								<u-icon name="plus" class="icon" :size="40"></u-icon>
								<view class="u-add-tips">选择图片</view>
							</view>
						</button>
					</view>
				</view>
				<!-- #endif -->
			</u-cell-item>
			<u-cell-item title="昵称" @click="edit(form.name,'修改昵称','name')">
				<text>{{form.name}}</text>
			</u-cell-item>
			<!-- <u-cell-item title="昵称" :arrow="false">
				<input type="nickname" placeholder="请输入昵称" v-model="form.name" @confirm="submit"
					style="position: absolute;top: 0;width: 623rpx;height: 100%;padding-right: 40rpx;" />
			</u-cell-item> -->
			<!-- <u-cell-item title="账户管理模式" v-if="form.isenterprise" :arrow="false">
				<text>{{userdetail.ent.financetype}}</text>
			</u-cell-item>
			<u-cell-item title="交接部门" @click="clickChangeDepartment" v-if="isChoose">
				<text class="u-type-primary" style="text-decoration: underline;">点击交接</text>
			</u-cell-item>
			<u-cell-item :title="form.enterprisename" @click="unbindEnterPrice" v-if="form.isenterprise">
				<text class="u-type-primary" style="text-decoration: underline;">解绑客户组</text>
			</u-cell-item> -->
			<u-cell-item title="手机号码" @click="changeMobile">
				<text>{{form.mobile}}</text>
				<text class="u-type-primary u-p-l-15" style="text-decoration: underline;">更换手机号</text>
			</u-cell-item>
			<u-cell-item title="修改密码" @click="forgetpassword">
				<text class="u-type-primary" style="text-decoration: underline;">去修改</text>
			</u-cell-item>
			<u-cell-item title="绑定微信" @click="bindWeixin">
				<text class="u-type-primary" v-if="userdetail.openid">已绑定</text>
				<text class="u-type-primary" style="text-decoration: underline;" v-else>点击绑定</text>
			</u-cell-item>
			<u-cell-item title="我的二维码" @click="myQRcode">
				<span slot="right-icon">
					<image style="width: 60rpx; height: 60rpx; margin-right:10rpx ;"
						src="">
					</image>
				</span><u-icon name="arrow-right" color="#fff" size="28"></u-icon>
			</u-cell-item>
			<u-cell-item title="切换身份" v-if="userdetail.bindinfo" @click="toggleIdentities">
			</u-cell-item>
		</u-cell-group>
		<!-- 客户组信息 -->
		<!-- <u-cell-group title="客户组信息">
			<u-cell-item title="加入(创建)客户组" @click="goBinding">
				<text class="u-type-primary" style="text-decoration: underline;"></text>
			</u-cell-item>
			<u-cell-item title="客户组管理" @click="goEnterprises" v-if="isAdminEnterprise">
				<text v-for="(item,index) in form.bindenterprises" :key="item.id">
					<text v-if="item.id == userdetail.lastloginenterpriseid">{{item.name}}</text>
				</text>
			</u-cell-item>
			<u-cell-item title="我加入的客户组" :arrow="false" v-if="!isAdminEnterprise && userdetail.lastloginenterpriseid > 0">
				<text v-for="(item,index) in form.bindenterprises" :key="item.id">
					<text v-if="item.id == userdetail.lastloginenterpriseid">{{item.name}}</text>
				</text>
			</u-cell-item>
			<u-cell-item title="申请加入客户组" @click="goApplyList" v-if="isAdminEnterprise">
				<text style="text-decoration: underline;" v-if="userdetail.lastloginenterpriseid > 0">{{applyList.length}}个申请待处理</text>
			</u-cell-item>
		</u-cell-group> -->
		<view class="u-p-30">
			<!-- <view class="u-p-b-30" v-if="form.bindenterprises.length > 0">
				<u-button type="primary" form-type="submit" @click="changeIdentity">切换身份</u-button>
			</view> -->
			<!-- <view class="u-p-b-30">
				<u-button type="primary" form-type="submit" @click="submit">修改用户信息</u-button>
			</view> -->
			<view class="">
				<u-button type="error" @click="quit">退出账号</u-button>
			</view>
		</view>
		<!-- 弹出修改 -->
		<!-- <u-popup v-model="show" mode="bottom" border-radius="14" length="90%" :closeable="true">
			<view class="u-p-30 u-m-t-60">
				<view>
					<u-input type="nickname" :border="true" :placeholder="editPlaceholder"
						v-model="editValue"></u-input>
				</view>
				<view class="u-p-t-30">
					<u-button type="primary" @click="submit">确定</u-button>
				</view>
			</view>
		</u-popup> -->
		
		<u-modal
			v-model="show" 
			:show-cancel-button="true" 
			:negative-top="300" 
			:title="editPlaceholder"
			@confirm="editSubmit"
			>
			<scroll-view :scroll-y="true" class="slot-content">
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<u-form label-width="140rpx" label-position="top">
						<u-form-item>
							<u-input v-model="editValue" :focus="editfocus" :border="true" />
							<!-- <input type="nickname" placeholder="请输入昵称" v-model="form.name"
								style="position: absolute;top: 0;width: 623rpx;height: 100%;padding-right: 40rpx;" /> -->
						</u-form-item>
					</u-form>
				</view>
			</scroll-view>
		</u-modal>
		<!-- 弹出二维码 -->
		<u-popup v-model="showQRcode" mode="center" border-radius="14" :closeable="true">
			<view class="u-p-80">
				<u-image class="u-flex" width="500rpx" :src="qrcodeURL" mode="widthFix">
				</u-image>
			</view>
		</u-popup>
		<!-- 选择切换 -->
		<u-popup v-model="showIdentities" mode="bottom" border-radius="14">
			<identities-list></identities-list>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	// 引入配置
	import config from '@/common/config.js'
	
	export default {
		data() {
			return {
				fileList: [],
				list: [],
				showUploadList: false,
				form: {
					mobile: '',
					sex: 1,
					email: '',
					photo: '',
					name: '',
					bindenterprises: []
				},
				// 弹出修改
				show: false,
				editValue: '',
				editPlaceholder: '请输入',
				editType: '',
				editfocus: false,
				// 弹出二维码
				showQRcode: false,
				qrcodeURL: '',
				applyList: [],
				fileUploadURL: getApp().globalData.fileUploadURL,
				// 切换身份
				showIdentities: false
			}
		},
		computed: {
			...mapState({
				tabbar: state => state.tabbar,
				userdetail: state => state.userdetail,
				header: state => state.Authorization,
				// lastloginenterpriseid: state => state.lastloginenterpriseid
			}),
			photo() {
				return this.fileURL + this.form.photo
			}
		},
		watch: {
			// editValue(val) {
			// 	this.form[this.editType] = val
			// },
			"form.name"(val) {
				// console.log('formname:',val)
			}
		},
		mounted() {
			this.getDetails().then(() => {
				// this.$u.post('/Enterprise/BindApply/List',{
				// 	"PageIndex":1,
				// 	"PageSize":999,
				// 	"Key":"",
				// 	"enterpriseId": this.lastloginenterpriseid
				// }).then((res) => {
				// 	console.log('申请绑定客户组申请列表',res.rows.filter((item)=>item.state == 0))
				// 	this.applyList = res.rows.filter((item)=>item.state == 0)
				// })
			})
		},
		methods: {
			toggleIdentities() {
				this.showIdentities = true
			},
			// 申请加入客户组
			join() {
				uni.navigateTo({
					url: '/pages/my/enterprises/binding/binding'
				})
			},
			// 切换身份
			changeIdentity() {
				uni.navigateTo({
					url: '/pages/my/enterprises/enterprises'
				})
			},
			// 绑定客户组
			goBinding() {
				uni.navigateTo({
					url: '/pages/my/enterprises/binding/index/index'
				})
			},
			// 我的客户组
			// goEnterprises(){
			// 	uni.navigateTo({
			// 		url: '/pages/my/enterprises/details/details?id='+this.userdetail.lastloginenterpriseid
			// 	})
			// },
			// 申请加入客户组列表
			// goApplyList(){
			// 	uni.navigateTo({
			// 		url: '/pages/my/enterprises/applyList/applyList'
			// 	})
			// },
			// 切换头像
			getUserProfile(e) {
				uni.uploadFile({
					url: this.fileUploadURL,
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						Authorization: this.header,
						operatorid: config.operatorid,
						Terminal: 'WX'
					},
					success: res => {
						console.log('uploadFile', res)
						let data = JSON.parse(res.data)
						this.form.photo = data.datas.path
						this.submit()
					},
					fail: (err) => {
						// uni.showModal({
						// 	title: '失败回调',
						// 	content: JSON.stringify(err)
						// })
						console.log('失败回调', err)
					},
					complete: (complete) => {
						// uni.showModal({
						// 	title: '结束回调',
						// 	content: JSON.stringify(complete)
						// })

						console.log('结束回调', complete)
					}
				})
			},
			getDetails() {
				return this.$store.dispatch('getDetails').then((res) => {
					if (res) {
						this.form = res
						if (this.form.photo != '') {
							this.fileList = [{
								url: this.fileURL + this.userdetail.photo
							}]
						}
					}
				})
			},
			changeMobile() {
				uni.navigateTo({
					url: '/pages/my/changeMobile/changeMobile'
				})
			},
			quit() {
				uni.removeStorageSync('lifeData');
				uni.removeStorageSync('chooseEnterpriseAccount');
				uni.removeStorageSync('selectUserType')
				this.$u.vuex('Authorization', '')
				this.$u.vuex('exp', '')
				this.$u.vuex('userdetail', {
					id: 0,
					bindinfo: {
						operator: {},
						databoardcity: []
					}
				})
				this.$u.vuex('storeId', '')
				this.$u.vuex('operatorid', '')
				this.$u.vuex('franchiseId', '')
				this.$u.vuex('userType', -1)
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			uploadSuccess(data, index, lists, name) {
				this.showUploadList = false
				this.form.photo = data.datas.path
				this.submit()
			},
			uploadError(data, index, lists, name) {
				uni.showToast({
					icon: 'none',
					title: '提交失败，请重试'
				})
			},
			editSubmit(){
				this.form[this.editType] = this.editValue
				this.submit()
			},
			submit() {
				console.log('form:', this.form)
				this.$u.post('/User/Edit', {
					name: this.form.name,
					photo: this.form.photo
				}).then((res) => {

					uni.showToast({
						title: res.msg
					})
					this.show = false
				})

				// uni.request({
				// 	url: this.baseURL + '/User/Edit',
				// 	header: {
				// 		authorization: this.header
				// 	},
				// 	dataType: "json",
				// 	responseType: "json",
				// 	method: "POST",
				// 	data: {
				// 		name: this.form.name,
				// 		photo: this.form.photo
				// 	},
				// 	success(res) {
				// 		console.log("success :", res.data);
				// 		uni.showToast({
				// 			title: res.data.msg
				// 		})
				// 		this.show = false
				// 	},
				// 	fail(e) {
				// 		console.log(e);
				// 	},
				// 	complete(res) {
				// 		console.log("complete :", res);
				// 	}
				// })
			},
			bindWeixin() {
				if (this.userdetail.openid) {
					uni.showModal({
						content: '您已经绑定微信,需要重新绑定吗？',
						success: (res) => {
							if (res.confirm) {
								// #ifdef MP-WEIXIN
								uni.login({
									provider: 'weixin', //使用微信登录
									success: ret => {
										var code = ret.code
										this.$u.get('/User/Account/BindingWeiXin?code=' + code)
											.then(
												data => {
													if (data.status == 0) {
														console.log(data.msg)
														uni.showToast({
															title: data.msg
														})
													}
												})
									}
								})
								// #endif
							}
						}
					})
				} else {
					// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin', //使用微信登录
						success: ret => {
							var code = ret.code
							this.$u.get('/User/Account/BindingWeiXin?code=' + code).then(data => {
								if (data.status == 0) {
									console.log(data.msg)
									uni.showToast({
										title: data.msg
									})
								}
							})
						}
					})
					// #endif
				}
			},
			edit(value, placeholder, type) {
				this.show = true
				this.editPlaceholder = placeholder
				this.editValue = value
				this.editType = type
				this.editfocus = true
			},
			forgetpassword() {
				uni.navigateTo({
					url: '/pages/login/forgetpassword'
				})
			},
			myQRcode() {
				// wx.reportEvent("useqrcode", {
				//   "api": "/user/myQRCode/",
				//   "role": "用户点击个人中心的二维码",
				//   "type": this.userdetail.type,
				//   "mobile": this.userdetail.mobile,
				//   "usename": this.userdetail.name,
				// })
				this.showQRcode = true
				this.$u.get('/user/myQRCode/').then(data => {
					this.qrcodeURL = data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #efefef;
	}

	.idcard-img-list {
		.idcard-img-item {
			position: relative;

			.idcard-img {
				width: 256rpx;
				height: 162rpx;
				border-radius: 10rpx;
			}

			.icon {
				color: #dc3545;
				font-size: 46rpx;
				position: absolute;
				top: -12rpx;
				right: -16rpx;
				height: 48rpx;
				width: 48rpx;
				line-height: 48rpx;
				background: #fff;
				border-radius: 48rpx;
			}
		}
	}

	.tips {
		display: flex;
		font-size: 24rpx;
		justify-content: center;
		align-items: baseline;

		.tipser {
			.text {
				color: $u-color-blue;
				display: inline-block;
			}
		}
	}
</style>